<template>
  <div>
    <pt-table :columns="columns" :dataSource="tableData"
      :options="options" :fetch="getTableList" :pagination="pagination">
    </pt-table>
  </div>
</template>
<script>
import { buyRecordList } from '@/api/activity.js'
export default {
  props: {
    userId: {
      type: Number,
      default: null
    }
  },
  data() {
    return { // 表单配置
      columns: [{
        prop: 'payTime', label: '购买日期', minWidth: 100, align: 'center'
      },{
        label: '类型', minWidth: 120, align: 'center', render: row => <div userMsg={row}>{ row.type === 1 ? '会员': '加量包'}</div>
      },{
        prop: 'price', label: '支付金额', minWidth: 120, align: 'center',
      },{
       label: '获得红包', minWidth: 120, align: 'center', render: row => <div userMsg={row}>{ row.num + '张' + row.amount+ comConfig.unit}</div>
      },{
        prop: 'usedNum', label: '已使用红包', minWidth: 120, align: 'center'
      }],
      pagination: { total: 10, page: 0, size: 10, curPage: 1 }, // 分页
      options: { // 表单外观
        expand: false,
        mutiSelect: false, // 多选则 mutiSelect
        index: false, // 显示序号
        loading: false, // 表格动画
        initTable: false // 是否一挂载就加载数据
      },
      tableData: [], // 表单数据
      params: {
        page: 0,
        size: 10,
        userId: null
      }
    }
  },
  watch:{
    userId(val) {
      this.getTableList(true)
    }
  },
  methods: {
    search() { // 搜索
      this.pagination.curPage = 1
      this.pagination.page = 0
      this.getTableList()
    },
    getTableList(first) { // 获取订单数据
      if (first) {
        this.pagination.curPage = 1
        this.pagination.page = 0
        this.pagination.size = 10
      }
      const params = {
        size: this.pagination.size,
        page: this.pagination.page
      }
      params.userId = this.userId
      this.options.loading = true
      buyRecordList(params).then(res => {
        if (res.success) {
          this.tableData = res.data.list || []
          this.pagination.total = res.data.total
        }
      }).finally(() => this.options.loading = false)
    }
  }
}
</script>
<style scoped>
  
</style>
